<!-- 用户参与活动管理 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="()=>{searchData = {};gzThreeRef.clear()}" searchConditionNum="6">
        <a-form-item class="table-search-item">
          <GzTreeSelect ref="gzThreeRef" v-model:value="searchData['agentNo']" :isNeedDefault="false" />
        </a-form-item>
        <!-- <GzTextUp v-model:value="searchData['realName']" placeholder="用户名称" /> -->
        <GzTextUp v-model:value="searchData['phone']" placeholder="用户手机号" />
        <GzTextUp v-model:value="searchData['activityName']" placeholder="活动名称" />
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'joinType'">
            <template v-if="record.joinType === 0">直接浏览</template>
            <template v-if="record.joinType === 1">分享</template>
            <template v-if="record.joinType === 2">助力</template>
          </template>

          <template v-if="column.key === 'operation'">
            <!-- <a-button type="link">详情</a-button> -->
          </template>
        </template>
      </GzTable>
    </a-card>
  </page-header-wrapper>
</template>

<script lang="ts" setup>
// import { req, API_URL_FANS_ACTIVITY_LIST } from '@/api/manage'
import {$apiFansActivityList} from '@/api/fansManage/fansActivity/index'
import { ref, reactive, getCurrentInstance } from 'vue'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const gzThreeRef = ref()
const infoTableRef = ref()
let tableColumns = reactive([
  { key: 'fansId', title: 'fansId',dataIndex: 'fansId',fixed: 'left' },
  // { key: 'realName', title: '用户名称',dataIndex: 'realName' },
  { key: 'nickName', title: '昵称',dataIndex: 'nickName' },
  // { key: 'name', title: '用户名称',dataIndex: 'name', width: 200, minWidth: 150, maxWidth: 250 },
  { key: 'phone', title: '用户手机号',dataIndex: 'phone' },
  { key: 'activityName', title: '活动名称',dataIndex: 'activityName', width: 140 },
  { key: 'startTime', title: '活动开始时间',dataIndex: 'startTime', width: 180 },
  { key: 'endTime', title: '活动结束时间',dataIndex: 'endTime', width: 180 },
  { key: 'createdAt', title: '参与活动时间',dataIndex: 'createdAt', width: 180 },
  // { key: 'joinType', title: '活动参与方式',dataIndex: 'joinType', width: 140, minWidth: 140, maxWidth: 170 },
  { key: 'agentNo', title: '机构号',dataIndex: 'agentNo' },
  { key: 'agentName', title: '机构名称',dataIndex: 'agentName' },
  // { key: 'operation', title: '操作', dataIndex: 'operation',width: 260, fixed: 'right', align: 'center' }
])

const searchData:any = ref({})
// 请求table接口数据
function reqTableDataFunc(params: any) {
  return $apiFansActivityList(params)
}

function searchFunc() {
  infoTableRef.value.refTable(true)
}

/* 查询时间更改 */
function queryTimeChange(dates:  [string, string], dateStrings: [string, string]){
  if(dates){
    searchData.value['sTime']=dateStrings[0]
    searchData.value['eTime']=dateStrings[1]
  }else{
    delete searchData.value['sTime']
    delete searchData.value['eTime']
  }
}

</script>
